<template>
    <div>
        <div class="mt-header">
            <article>
                <div class="mt-logo" style="margin-left: 0px">
                    <span>我的信息</span>
                </div>
            </article>
        </div>
        <div class="info-content">
            <el-row class="tac">
                <el-col :span="4">
                    <h5>全部功能</h5>
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>我的购物车</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">导航二</span>
                        </el-menu-item>
                        <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">导航三</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">导航四</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="15" offset="1">
                    <div class="info-title">
                        <div class="info-header" style="padding: 10px 0">
                            <div class="user-img" @mouseenter="edit=true" @mouseleave="edit=false">
                                <span class="info-edit" v-show="edit" >编辑资料</span>
                                <img :src="userData.icon" alt="" style="width: 100%; height: 100%" />
                            </div>
                            <div class="info-bar">
                                <div class="info-name">{{userData.name}}({{userData.userReallyName}})</div>
                                <div class="info-name"><span style="color:#f00;font-weight:500;">LV</span>.{{userData.level}}</div>
                            </div>
                            <div class="address" style="display:inline-block;vertical-align:top;height:52px;line-height:52px;margin-left:60px">
                                <span>我的收货地址</span>
                            </div>
                            <div class="vip-type" style="display:inline-block;vertical-align:top;height:52px;line-height:52px;margin-left:60px">
                                <span>我的会员等级</span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userData: this.$store.state.userData,
            edit: false
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    created() {
        console.log(this.$store.state.userData, 'this.$store.state.userData');
    }
};
</script>
<style scoped>
.mt-header {
    height: 36px;
    background: #ff4401;
    padding: 12px 0;
    position: relative;
    z-index: 5;
    border-bottom: 1px #e7e7e7 solid;
}
.mt-header article {
    width: 1190px;
    margin: 0 auto;
    overflow: hidden;
    min-width: 860px;
}
.mt-logo {
    text-align: center;
}
.mt-logo span {
    font-size: 35px;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
}
.info-content {
    margin: 20px auto;
    width: 1200px;
}
.info-header {
    background: #f5f8fa;
}
.info-title {
    border: 1px solid #e4eaee;
    margin-bottom: 23px;
    font-size: 12px;
    color: #4b4b4b;
    position: relative;
    z-index: 3;
}
.user-img {
    width: 52px;
    height: 52px;
    position: relative;
    border: 2px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    margin-left: 20px;
}
.info-edit {
    line-height: 1;
    padding-top: 23px;
    width: 100%;
    height: 34px;
    position: absolute;
    text-align: center;
    background: #000;
    color: #fff;
    opacity: 0.6;
}
.info-bar {
    display: inline-block;
    height: 52px;
    vertical-align:top;
    margin-left:10px;
}
.info-name{
    margin-top: 10px;
}
</style>